<template>
  <div>
    <baidu-map
      :center="center"
      :zoom="zoom"
      @ready="handler"
      class="container"
      @zoomend="handleZoomEnd()"
    >
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <bml-marker-clusterer :averageCenter="true" :grid-Size="200" :maxZoom="15">
        <bm-marker
          v-for="(marker, index) in markers"
          :key="index"
          :position="marker.position"
          @click="handleClick(marker)"
        >
          <bm-label
            massClear
            :content="marker.position.lng + '<br/>' + marker.position.lat"
            v-if="labelShow"
            :offset="{ width: -5, height: -5 }"
            :labelStyle="{
              color: 'white',
              fontSize: '14px',
              width: '100px',
              height: '40px',
              border: 'none',
              background: '#1ebd8d',
              textAlign: 'center',
              lineHeight: '28px',
            }"
          />
          <!-- <bm-info-window
            :position="marker.position"
            :visible="index === 0"
            :showShadow="false"
          >
            <div>{{ marker.title }}</div>
            <div>{{ marker.description }}</div>
          </bm-info-window> -->
        </bm-marker>
      </bml-marker-clusterer>
    </baidu-map>
  </div>
</template>

<script>
import { BmlMarkerClusterer, BmNavigation, BmScale } from "vue-baidu-map";
export default {
  components: { BmlMarkerClusterer, BmScale, BmNavigation },
  data() {
    return {
      labelShow: false,
      // 定位位置 经度 纬度
      center: { lng: 128.42, lat: 47.2 },
      // 地图放大等级
      zoom: 12,
      markers: [
        // {
        //   position: { lng: 128.907803, lat: 47.728171 },
        //   labelContent: "A",
        //   title: "内容A",
        //   description: "这是内容A的详细描述",
        // },
        // {
        //   position: { lng: 128.807603, lat: 47.728071 },
        //   labelContent: "A",
        //   title: "内容A",
        //   description: "这是内容A的详细描述",
        // },
        // {
        //   position: { lng: 128.707303, lat: 47.728070 },
        //   labelContent: "A",
        //   title: "内容A",
        //   description: "这是内容A的详细描述",
        // },
        // {
        //   position: { lng: 128.607303, lat: 47.728151 },
        //   labelContent: "A",
        //   title: "内容A",
        //   description: "这是内容A的详细描述",
        // },
        // {
        //   position: { lng: 128.507203, lat: 47.728171 },
        //   labelContent: "A",
        //   title: "内容A",
        //   description: "这是内容A的详细描述",
        // },
      ],
    };
  },
  mounted() {
    this.generateMarkers();
    console.log(this.markers, "markers........");
  },
  methods: {
    handleClick(marker){
      console.log(marker, "marker........");
      this.zoom=15
      this.center=marker.position
    },
    generateMarkers() {
      const lat_min = 47.09;
      const lat_max = 47.31;
      const lng_min = 128.33;
      const lng_max = 128.55;

      for (let i = 0; i < 5; i++) {
        const lat = Math.random() * (lat_max - lat_min) + lat_min;
        const lng = Math.random() * (lng_max - lng_min) + lng_min;
        this.markers.push({ id: i, position: { lng, lat } });
      }
    },

    // 实例对象
    handler({ map }) {
      // 创建一个地图实例并启用滚轮缩放
      this.map = map;
      // 启用滚轮缩放功能
      this.map.enableScrollWheelZoom();
    },

    handleZoomEnd() {
      if (this.map) {
        const zoom = this.map.getZoom();
        console.log(zoom);
        if (zoom >= 12) {
          this.labelShow = true;
        } else this.labelShow = false;
      }
    },
  },
};
</script>

<style scoped>
/* 去除右下角百度图标 */
:deep(.anchorBL) {
  display: none !important;
}

.container {
  height: 100vh;
  width: 100vw;
}
</style>